<template>
  <view class="page-login">
    <view class="side">
      <view class="logo">
        <image
          src="https://hongwu-1318589231.cos.ap-guangzhou.myqcloud.com/dongyuan/default/2025/08/05/ed7060dca37b43c69c30f1bf01ffd1862kQWewJbJ4wK15a011c3306944a3f3930bda80f44534.png"
          mode="widthFix"></image>
      </view>
      <view class="bg">
        <image
          src="https://hongwu-1318589231.cos.ap-guangzhou.myqcloud.com/dongyuan/default/2025/08/05/4d5a498c564b479196262d7690dccfcbQ50AqfdhZ7Dhabf194593c13ad287322bfa8131e8d2e.png"
          mode="widthFix"></image>
      </view>
    </view>
    <view class="main">
      <view class="form">
        <view class="title">你好，欢迎登录Mocup coffee</view>
        <u-input placeholder="请输入登录账号" border="surround" v-model="form.username"></u-input>
        <u-input placeholder="请输入密码" border="surround" v-model="form.password" :type="isShowPwd ? 'text' : 'password'">
          <template #suffix>
            <image :src="isShowPwd?'/static/imgs/eye.png':'/static/imgs/eye-off.png'" mode="" style="width: 24px;height: 24px;" @click="isShowPwd = !isShowPwd"></image>
            <!-- <u-icon :name="isShowPwd ? 'eye-off' : 'eye'" @click="isShowPwd = !isShowPwd"></u-icon> -->
          </template>
        </u-input>
        <u-checkbox :customStyle="{ marginBottom: '8px' }" label="记住密码" name="agree" usedAlone
          v-model:checked="checked" />
        <view class="submit" @click="submit">登录</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    computed,
    watch,
    onMounted,
    onUnmounted
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    loginApi,
    userInfoApi
  } from '@/requests/apis/user'
  import {
    useUser
  } from '@/stores/modules/user'

  onLoad(() => {
    console.log(uni.getStorageSync('username'), 11)
    if (uni.getStorageSync('username') && uni.getStorageSync('password')) {
      form.value.username = uni.getStorageSync('username')
      form.value.password = uni.getStorageSync('password')
      checked.value = true
    }
  })

  const {
    setUserInfo
  } = useUser()
  const checked = ref(false)

  const form = ref({
    username: '',
    password: '',
  })
  // 控制密码是否明文显示：true=明文，false=密文
  const isShowPwd = ref(false);

  const submit = () => {
    console.log(form.value)
    let err = ''
    if (!form.value.password) {
      err = '请输入密码'
    }
    if (!form.value.username) {
      err = '请输入账号'
    }
    if (err) {
      uni.showToast({
        title: err,
        icon: 'none',
      })
      return
    }
    if (checked.value) {
      uni.setStorageSync('username', form.value.username)
      uni.setStorageSync('password', form.value.password)
    } else {
      uni.removeStorageSync('username')
      uni.removeStorageSync('password')
    }
    submitReq()
  }
  const submitReq = async () => {
    uni.showLoading({
      title: '登录中...',
    })
    const res = await loginApi(form.value)
    uni.hideLoading()
    if (res.code === 200) {
      uni.setStorageSync('token', res.token)
      uni.showToast({
        title: res.msg || "",
        icon: 'none',
      })
      const resInfo = await userInfoApi()
      setUserInfo(resInfo)
      uni.navigateTo({
        url: '/pages/login_store/index',
      })
    }
  }
</script>
<style src="./index.scss" lang="scss"></style>
